<style media="screen">
  .data-kb-total-container {
    padding: 20px 10px 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(204, 213, 221, .75);
  }

  .data-kb-total-container .bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
  }

  .data-kb-total-container .bottom-nav li {
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px 13px;
    border-radius: 4px;
    color: #999;
    margin-left: 10px;
  }

  .data-kb-total-container .bottom-nav li.active {
    background: #565E99;
    color: #fff;
  }

  .rt-item .wp {
    position: relative;
  }

  .rt-item .icon-Gm-station {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    line-height: 10px;
    font-size: 6px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
  }

  .rt-item .st {
    position: relative;
  }

  .rt-item .yd {
    position: relative;
    background: #76BDE5;
  }

  .unit-item .yd {
    position: relative;
    background: #76BDE5;
  }

  .rt-item .icon-Gm-parking {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    line-height: 10px;
    font-size: 6px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
  }

  .yxDetailInfo {
    overflow-x: scroll;
  }

  .wpst-wrap {
    overflow: hidden;
  }

  .wpst-wrap .station-li {
    float: left;
    width: 50px;
    margin-right: 10px;
  }

  .wpst-wrap .station-li:nth-child(4n) {
    margin-right: 30px;
  }

  .wpst-wrap .station-li:nth-child(12n) {
    margin-right: 0px;
  }

  .wpst-wrap .station-li .cz {
    color: #44b549;
  }

  .wpst-wrap .station-li .lv {
    color: rgba(249, 185, 107, 1);
  }

  .wpst-wrap .station-li .dq {
    color: #e75776;
  }

  .wpst-wrap .station-li .zy {
    color: #c68b8b;
  }

  .wpst-wrap .station-li .kz {
    color: #bfc0c1;
  }

  .wpst-wrap .station-li .fn {
    color: #AC101A;
  }

  .rt-item .fn {
    background-color: #AC101A;
  }

  .rt-unit-item.fn {
    background-color: #AC101A;
  }

  .parking-position-icon.fn {
    color: #AC101A;
  }

  .wpst-wrap .station-li .icon-Nav-contract-choice {
    color: #5E67A5;
  }

  .wpst-wrap img {
    margin-left: 240px;
    margin-top: 80px;
  }

  .parking-position-icon.yd {
    color: #76BDE5;
  }

  .head-container {
    position: relative;
    padding: 10px 0px 14px;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 200px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .search-screening-container {
    height: 30px;
    margin-bottom: 20px;
  }

  .search-screening-container .group-wrap {
    height: 34px;
    line-height: 34px;
    float: left;
  }

  .search-screening-container .group-wrap .label-name {
    float: left;
    color: #999;
  }

  .search-screening-container .group-wrap .hl-cascader__container {
    float: left;
    margin-right: 10px;
  }

  .rent-management #program-st {
    width: 200px;
  }

  .rent-sale-state {
    right: -21px;
    font-size: 12px;
    top: -3px;
    width: 70px;
    line-height: 34px;
    padding-bottom: 5px;
    background-image: url(assets/images/rentsale.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    transform: rotate(45deg);
    font-weight: 400;
  }

  .rent-unit-child {
    height: 44px;
    position: relative;
    border: 2px dotted #fff;
    margin-right: 10px;
    padding: 5px;
    margin-top: 10px;
  }

  .rent-child-state-wp {
    border-color: #A994FF;
    background: rgba(255, 255, 255, 0.8);
  }

  .rent-child-state-wp .intro,
  .rent-child-state-wp .name {
    color: #A994FF;
  }

  .rent-child-state {
    right: 3px;
    bottom: 3px;
    background: #fff;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .project-group-tabbar {
    margin-bottom: 14px;
  }

  .project-group-tabbar p {
    color: #CFCFCF;
    font-size: 12px;
    height: 12px;
    margin-bottom: 6px;
  }

  .rt-container .title {
    border: none;
  }

  .rt-container .title-squre {
    width: auto;
  }

  .sectionTitle {
    background: #F5F8FF;
    padding: 0 15px;
    line-height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sectionTitle img {
    width: 17px;
    height: 17px;
  }

  .rt-container .unit-item {
    width: 100%;
  }

  .position-content-item {
    width: 100%;
  }

  .rt-position-item:nth-child(4n) {
    margin-right: 0px;
  }

  .explainBox {
    position: relative;
  }

  .explainBox img {
    width: 16px;
    height: 16px;
  }

  .explainBox:hover .explainText {
    display: block;
  }

  .explainText {
    position: absolute;
    display: none;
    right: -23px;
    top: 32px;
    width: 350px;
    height: 180px;
    opacity: 1;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px -1px 9px 0px rgba(190, 190, 190, 0.18);
    color: #999;
    font-size: 14px;
    padding: 10px;
    z-index: 9999;
  }

  .explainBox .explainText li { 
    width: 100%;
    margin-bottom: 6px;
    text-align: left;
  }

</style>

<!--租控管理-->
<section class="plr-24 rent-management" id="renting" @click="cancelBusiness">
  <hl-page-header title="租控管理" class="mb-20"></hl-page-header>

  <div class="project-group-tabbar clearfix">
    <div style="float:left;">
      <p>项目</p>
      <hl-select :data="projectList" v-model="projectIdSelect" :width="176" @on-change="getGroupPrimaryData"
        class="mr-10"></hl-select>
    </div>
    <div style="float:left;">
      <p>组合</p>
      <hl-cascader :selected="selectedGroupData" :width="176" :primary-data="groupOneData"
        :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup"
        @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup" class="mr-10"></hl-cascader>
    </div>
    <div style="float:left;">
      <p>楼栋</p>
      <hl-select :data="buildings" v-model="buildingsSelect" :width="176" class="mr-10" :multiple="true"
        @on-change="checkBuilding"></hl-select>
    </div>
    <div style="float:left;">
      <p>业态</p>
      <hl-select :data="businessTypesList" v-model="selectedBusinessTypes" :width="176" class="mr-10"></hl-select>
    </div>
    <div style="float:left;">
      <p></p>
      <hl-button @on-click="searchByGroup">查询</hl-button>
      <hl-button @on-click="resetByGroup">重置</hl-button>
    </div>
  </div>

  <!-- 数据看板 v-if=" permissions.indexOf('c71') !== -1 || permissions.indexOf('c117') !== -1 || permissions.indexOf('c118') !== -1 " -->
  <section class="data-kb-total-container">
    <div class="search-screening-container">
      <div class="group-wrap">
        <div style="float:left;">楼宇总面积：<i class="color-primary ml-5">{{buildingMes2.totalAcreage | formatNum}}m²</i></div>
      </div>

      <div style="float:right;align-items: center;" class="dy-flex rent-tab-container">
        <ul class="cursor">
          <li :class="{active:curDataPanel == '签约维度'}" @click="selectDataPanel('签约维度')"
            v-if="permissions.indexOf('c117') > -1">签约维度</li>
          <li :class="{active:curDataPanel == '在租维度'}" @click="selectDataPanel('在租维度')"
            v-if="permissions.indexOf('c71') > -1">在租维度</li>
          <li :class="{active:curDataPanel == '缴费维度'}" @click="selectDataPanel('缴费维度')"
            v-if="permissions.indexOf('c118') > -1">缴费维度</li>
        </ul>
        <div class="ml-10 explainBox">
          <img src="assets/images/explain.png" alt="">
          <ul class="explainText clearfix">
            <li>签约维度：统计已审批通过及正在执行中合同的资源</li>
            <li>在租维度：统计正在执行中合同的资源</li>
            <li>缴费维度：统计已审批通过或正在执行中，且合同账 单已缴费记录的合同资源</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 在租维度 -->
    <div class="data-kb-container" v-if="permissions.indexOf('c71') > -1 && curDataPanel == '在租维度' ">
      <div class="dy-flex">

        <!-- 单元看板 -->
        <div class="kb" v-if="unitkb">
          <div class="title">
            <div class="pull-left">单元看板</div>
            <div class="pull-right color-gray">总面积 <i
                class="color-primary ml-10">{{buildingMes1.totalUnitAcreage | formatNum}}m²</i></div>
          </div>

          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes1.rentAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">已租面积</span>
                <span class="per green">{{buildingMes1.rentAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.unitRentPrice | formatNum}}元/m²/天</div>
              <div>
                <span class="color-gray mr-16">在租均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.vaAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">空置面积</span>
                <span class="per gray">{{buildingMes1.vaAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.unitCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>

        </div>

        <!-- 工位看板 -->
        <div class="kb" v-if="buildingMes1.totalWpCount !== 0">
          <div class="title">
            <div class="pull-left">工位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes1.totalWpCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes1.rentWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">已租工位</span>
                <span class="per green">{{buildingMes1.rentWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.wpRentPrice | formatNum}}元/个/天</div>
              <div>
                <span class="color-gray mr-16">在租均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.vaWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">空置工位</span>
                <span class="per gray">{{buildingMes1.vaWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.wpCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>
        </div>

        <!-- 车位看板 -->
        <div class="kb" v-if="buildingMes1.totalStCount !== 0">
          <div class="title">
            <div class="pull-left">车位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes1.totalStCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes1.rentStCount}}个</div>
              <div>
                <span class="color-gray mr-16">已租车位</span>
                <span class="per green">{{buildingMes1.rentStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.stCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes1.vaStCount}}个</div>
              <div>
                <span class="color-gray mr-16">空置车位</span>
                <span class="per gray">{{buildingMes1.vaStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
          </ul>
        </div>

      </div>

      <!-- 单元看板 只有一个单元看板时显示-->
      <div class="one-unit-kb" v-if="buildingMes1.totalWpCount == 0 && buildingMes1.totalStCount == 0">
        <ul class="content clearfix">
          <li class="one-item">
            <div class="color-primary">{{buildingMes1.totalUnitAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">总面积</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes1.rentAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">已租面积</span>
              <span class="per green">{{buildingMes1.rentAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes1.vaAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">空置面积</span>
              <span class="per gray">{{buildingMes1.vaAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes1.unitRentPrice | formatNum}}元/m²/天</div>
            <div>
              <span class="color-gray mr-16">在租均价</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes1.unitCompanyCount}}家</div>
            <div>
              <span class="color-gray mr-16">签约企业</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 签约维度 -->
    <div class="data-kb-container" v-if="permissions.indexOf('c117') > -1 && curDataPanel == '签约维度' ">
      <div class="dy-flex">
        <!-- 单元看板 -->
        <div class="kb" v-if="unitkb">
          <div class="title">
            <div class="pull-left">单元看板</div>
            <div class="pull-right color-gray">总面积 <i
                class="color-primary ml-10">{{buildingMes2.totalUnitAcreage | formatNum}}m²</i></div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes2.rentAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">已签约</span>
                <span class="per green">{{buildingMes2.rentAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.unitRentPrice | formatNum}}元/m²/天</div>
              <div>
                <span class="color-gray mr-16">签约均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.vaAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">未签约</span>
                <span class="per gray">{{buildingMes2.vaAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.unitCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 工位看板 -->
        <div class="kb" v-if="buildingMes2.totalWpCount !== 0">
          <div class="title">
            <div class="pull-left">工位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes2.totalWpCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes2.rentWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">已签约</span>
                <span class="per green">{{buildingMes2.rentWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.wpRentPrice | formatNum}}元/个/天</div>
              <div>
                <span class="color-gray mr-16">签约均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.vaWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">未签约</span>
                <span class="per gray">{{buildingMes2.vaWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.wpCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 车位看板 -->
        <div class="kb" v-if="buildingMes2.totalStCount !== 0">
          <div class="title">
            <div class="pull-left">车位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes2.totalStCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes2.rentStCount}}个</div>
              <div>
                <span class="color-gray mr-16">已租车位</span>
                <span class="per green">{{buildingMes2.rentStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.stCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes2.vaStCount}}个</div>
              <div>
                <span class="color-gray mr-16">空置车位</span>
                <span class="per gray">{{buildingMes2.vaStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 单元看板 只有一个单元看板时显示-->
      <div class="one-unit-kb" v-if="buildingMes2.totalWpCount === 0 && buildingMes2.totalStCount === 0">
        <ul class="content clearfix">
          <li class="one-item">
            <div class="color-primary">{{buildingMes2.totalUnitAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">总面积</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes2.rentAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">已签约</span>
              <span class="per green">{{buildingMes2.rentAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes2.vaAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">未签约</span>
              <span class="per gray">{{buildingMes2.vaAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes2.unitRentPrice | formatNum}}元/m²/天</div>
            <div>
              <span class="color-gray mr-16">签约均价</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes2.unitCompanyCount}}家</div>
            <div>
              <span class="color-gray mr-16">签约企业</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 缴费维度 -->
    <div class="data-kb-container" v-if="permissions.indexOf('c118') > -1 && curDataPanel == '缴费维度' ">
      <div class="dy-flex">
        <!-- 单元看板 -->
        <div class="kb" v-if="unitkb">
          <div class="title">
            <div class="pull-left">单元看板</div>
            <div class="pull-right color-gray">总面积 <i
                class="color-primary ml-10">{{buildingMes3.totalUnitAcreage | formatNum}}m²</i></div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes3.rentAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">已缴费入住</span>
                <span class="per green">{{buildingMes3.rentAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.unitRentPrice | formatNum}}元/m²/天</div>
              <div>
                <span class="color-gray mr-16">均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.vaAcreage | formatNum}}m²</div>
              <div>
                <span class="color-gray mr-16">未缴费入住</span>
                <span class="per gray">{{buildingMes3.vaAcreagePercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.unitCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 工位看板 -->
        <div class="kb" v-if="buildingMes3.totalWpCount !== 0">
          <div class="title">
            <div class="pull-left">工位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes3.totalWpCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes3.rentWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">已缴费入住</span>
                <span class="per green">{{buildingMes3.rentWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.wpRentPrice | formatNum}}元/个/天</div>
              <div>
                <span class="color-gray mr-16">均价</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.vaWpCount}}个</div>
              <div>
                <span class="color-gray mr-16">未缴费入住</span>
                <span class="per gray">{{buildingMes3.vaWpPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.wpCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 车位看板 -->
        <div class="kb" v-if="buildingMes3.totalStCount !== 0">
          <div class="title">
            <div class="pull-left">车位看板</div>
            <div class="pull-right color-gray">总个数 <i class="color-primary ml-10">{{buildingMes3.totalStCount}}</i>
            </div>
          </div>
          <ul class="content clearfix">
            <li>
              <div class="color-primary">{{buildingMes3.rentStCount}}个</div>
              <div>
                <span class="color-gray mr-16">已租车位</span>
                <span class="per green">{{buildingMes3.rentStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.stCompanyCount}}家</div>
              <div>
                <span class="color-gray mr-16">签约企业</span>
              </div>
            </li>
            <li>
              <div class="color-primary">{{buildingMes3.vaStCount}}个</div>
              <div>
                <span class="color-gray mr-16">空置车位</span>
                <span class="per gray">{{buildingMes3.vaStPercent * 100 | formatNum}}%</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 单元看板 只有一个单元看板时显示-->
      <div class="one-unit-kb" v-if="buildingMes3.totalWpCount === 0 && buildingMes3.totalStCount === 0">
        <ul class="content clearfix">
          <li class="one-item">
            <div class="color-primary">{{buildingMes3.totalUnitAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">总面积</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes3.rentAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">已缴费入住</span>
              <span class="per green">{{buildingMes3.rentAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes3.vaAcreage}}m²</div>
            <div>
              <span class="color-gray mr-16">未缴费入住</span>
              <span class="per gray">{{buildingMes3.vaAcreagePercent * 100 | formatNum}}%</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes3.unitRentPrice | formatNum}}元/m²/天</div>
            <div>
              <span class="color-gray mr-16">均价</span>
            </div>
          </li>
          <li class="one-item">
            <div class="color-primary">{{buildingMes3.unitCompanyCount}}家</div>
            <div>
              <span class="color-gray mr-16">签约企业</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <div class="head-container clearfix plr-24">
    <div class="clearfix">
      <div class="flow">
        <div class="dy-flex" style="align-items: center">
          <web-calendar type="primary" v-model="empty_q" :afterdate="empty_h" tips="空置起始日" width="140"
            @change="emptyDate('KZ')"></web-calendar>
          <span style="width:20px;" class="text-center line-height-34 inline">-</span>
          <web-calendar type="primary" v-model="empty_h" :beforedate="empty_q" tips="空置截止日" width="140"
            @change="emptyDate('KZ')"></web-calendar>
        </div>
      </div>

      <div class="flow">
        <div class="dy-flex" style="align-items: center">
          <web-calendar type="primary" v-model="deadline_q" :afterdate="deadline_h" tips="到期起始日" width="140"
            @change="emptyDate('DQ')"></web-calendar>
          <span style="width:20px;" class="text-center line-height-34 inline">-</span>
          <web-calendar type="primary" v-model="deadline_h" :beforedate="deadline_q" tips="到期截止日" width="140"
            @change="emptyDate('DQ')"></web-calendar>
        </div>
      </div>

      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <div class="rt-container">
    <div class="rent-tab-container dy-flex" style="justify-content: space-between;">
      <ul class="mr-10 cursor">
        <li @click="getSomeRentStateData('全部')" :class="{active:selectedLeftTabItem == '全部'}"><i>全部</i></li>
        <li @click="getSomeRentStateData('空置单元')" :class="{active:selectedLeftTabItem == '空置单元'}">
          <i v-if="selectedrightTabItem == '单元视图'">空置单元<span>({{kzUnitTotalNum}})</span></i>
          <i v-if="selectedrightTabItem == '工位视图'">空置工位<span>({{kzWpTotalNum}})</span></i>
          <i v-if="selectedrightTabItem == '车位视图'">空置车位<span>({{kzStTotalNum}})</span></i>
          <i v-if="selectedrightTabItem == '平面图'">空置单元<span></span></i>
        </li>
        <li @click="getSomeRentStateData('即将到期')" :class="{active:selectedLeftTabItem == '即将到期'}"><i>即将到期</i>
          <span v-if="selectedrightTabItem == '单元视图'">({{dqUnitTotalNum}})</span>
          <span v-if="selectedrightTabItem == '工位视图'">({{dqWpTotalNum}})</span>
          <span v-if="selectedrightTabItem == '车位视图'">({{dqStTotalNum}})</span>
        </li>
        <li @click="getSomeRentStateData('即将履约')" :class="{active:selectedLeftTabItem == '即将履约'}"><i>即将履约</i>
          <span v-if="selectedrightTabItem == '单元视图'">({{lvUnitTotalNum}})</span>
          <span v-if="selectedrightTabItem == '工位视图'">({{lvWpTotalNum}})</span>
          <span v-if="selectedrightTabItem == '车位视图'">({{lvStTotalNum}})</span>
        </li>
        <li @click="getSomeRentStateData('自用')" :class="{active:selectedLeftTabItem == '自用'}"><i>自用</i>
          <span v-if="selectedrightTabItem == '单元视图'">({{zyUnitTotalNum}})</span>
          <span v-if="selectedrightTabItem == '工位视图'">({{zyWpTotalNum}})</span>
          <span v-if="selectedrightTabItem == '车位视图'">({{zyStTotalNum}})</span>
        </li>
      </ul>

      <ul class="cursor">
        <li v-for="item in rightTab" style="width:80px" @click="getSomeView(item)"
          :class="{active:selectedrightTabItem == item}"><i class="">{{item}}</i> <i></i></li>
      </ul>

      <!-- <div class="pull-right yt-select-container relative" v-if="businessTextFlag">
        <div class="select-bar" @click.stop="toggleBusinessBar">
          <span class="mr-10">业态选择</span>
          <span class="icon-Gm-screen" style="color:#bfc0c1"></span>
        </div>

        <div class="wrapper" v-if="businessFlag" @click.stop="">
          <ul class="clearfix">
            <li class="yt-select-item" v-for="item in businessTypesList" @click.stop="selectedYtItem(item.code)">
              <span :class="{active:item.selected,hlCheckbox:true}" :code="item.code">{{item.memo}}</span>
            </li>
          </ul>
          <div class="button-bar">
            <hl-button type="primary" @on-click="confirmBusiness">确认</hl-button>
            <hl-button type="outline" @on-click="clearAllBusiness">清空</hl-button>
            <hl-button type="outline" @on-click="cancelBusiness">取消</hl-button>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 远洋定制导航 -->
    <div class="inline" v-if="unitView && queryRRAT.indexOf('SINOOCEAN') > -1">
      <hl-checkbox-button :data="rratMenu" v-model="rratMenuSelect" width="100" inline merge @on-click="rratBack">
      </hl-checkbox-button>
    </div>


    <div class="clearfix dy-flex mt-10" style="justify-content: flex-end;">
      <div class="rt-item">
        <span class="wp">
          <i class="icon-Gm-station"></i>
        </span>
        <b>工位</b>
      </div>
      <div class="rt-item">
        <span class="st">
          <i class="icon-Gm-parking"></i>
        </span>
        <b>车位</b>
      </div>
      <div class="rt-item">
        <span class="yd"></span>
        <b>预定</b>
      </div>
      <div class="rt-item">
        <span class="yz"></span>
        <b>已出租</b>
      </div>
      <div class="rt-item">
        <span class="ny"></span>
        <b>即将履约</b>
      </div>
      <div class="rt-item">
        <span class="dq"></span>
        <b>即将到期</b>
      </div>
      <div class="rt-item">
        <span class="fn"></span>
        <b>已到期</b>
      </div>
      <div class="rt-item">
        <span class="zy"></span>
        <b>自用</b>
      </div>
      <div class="rt-item">
        <span class="kz"></span>
        <b>空置</b>
      </div>
    </div>
    <!-- 单元视图内容 -->
    <section v-if="unitView">
      <div class="content ptb-10 js-content">
        <div class="clearfix" :data-id="single.floorId" style="border: 1px solid #eff0f4;margin-bottom: 15px;"
          v-for="(single,index) in unitsData[unitsKey]">
          <div class="sectionTitle">
            <span>{{single.buildingName || '--'}}</span>
            <img @click="single.flag = !single.flag" :style="!single.flag?'transform:rotate(-180deg)':''"
              src="assets/images/unitShowIcon.png" alt="">
          </div>
          <div v-if="single.flag">
            <div v-for="item in single.children">
              <div class="title dy-flex" style="padding-left: 15px; color: #666;">
                <div class="pl-0 mr-10">{{item.floorName}}（楼层）</div>
                <div class="title-squre mr-10">{{Number(item.area).toFixed(2)}}（面积m²）</div>
                <div>{{item.num}}（单元）</div>
              </div>
              <div class="col-xs-10 unit-item">
                <!-- 单元 -->
                <!-- 已出租 cz 即将履约 lv 即将到期 dq 自用 zy 空置 kz 车位st111  单位wp-->
                <div class="clearfix" style="padding-bottom: 5px;">
                  <div class="rt-unit-item relative" :class="{
								cz:item1.rentState === 'IR',
								yd:item1.rentState === 'YD',
								lv:item1.rentState === 'IP',
								dq:item1.rentState === 'DU',
								zy:item1.rentState === 'ZY',
								kz:item1.rentState === 'VA',
								fn:item1.rentState === 'FN',
								wp:item1.unitType == 'WP',
								st:item1.unitType == 'ST',
								'icon-Gm-parking':item1.unitType == 'ST',
								'icon-Gm-station':item1.unitType == 'WP'
							}" :id="item1.unitId" :rentState="item1.rentState" :bType="item1.bType" :unitType="item1.unitType"
                    v-for="item1 in item.units"
                    v-show="(rratMenuSelect.length && rratMenuSelect.indexOf(item1.saleState) > -1) || !rratMenuSelect.length"
                    :style="{width: item1.splitFlag == 'N' ? '180px' : '950px', height: item1.splitFlag == 'N' ? '50px' : 'auto', 'min-height': '50px'}">
                    <div class="absolute" style="padding: 10px;width: 100%;height: 100%;left: 0;top: 0;"
                      v-if="item1.splitFlag == 'N'"
                      @click="getUnitDetails(item.floorId,item.floorNum,item1.unitId,item1.unitName,item1.unitAcreage,item1.unitType,item1.rentState,item1.contractId,item.floorName,item)">
                      <div class="intro">{{item1.unitName}}-{{item1.unitAcreage}}m²-{{item1.bType | formatBusinessType}}
                      </div>
                      <b class="name ellipsis-1">{{item1.company}}</b>
                    </div>
                    <span class="absolute rent-sale-state" v-if="item1.saleState == 'SALE'">可售</span>
                    <span class="absolute rent-sale-state" v-if="item1.saleState == 'SUB'">认购</span>
                    <span class="absolute rent-sale-state" v-if="item1.saleState == 'SIGN'">签约</span>
                    <span class="absolute rent-sale-state" v-if="item1.saleState == 'LOCK'">锁定</span>
                    <span class="absolute rent-sale-state" v-if="item1.saleState == 'IDTFY'">认筹</span>
                    <!-- 远洋GB -->
                    <div v-if="item1.splitFlag == 'Y'"
                      @click="getUnitDetails(item.floorId,item.floorNum,item1.unitId,item1.unitName,item1.unitAcreage,item1.unitType,item1.rentState,item1.contractId,item.floorName,item, true)">
                      <div class="intro text-center">
                        {{item1.unitName}}-{{item1.unitAcreage}}m²-{{item1.bType | formatBusinessType}}
                        {{item1.company}}
                      </div>
                      <div class="clearfix dy-flex mr-24" style="flex-flow:row wrap;">
                        <div v-for="item2 in item1.childUnits" :class="{'rent-child-state-wp': item2.unitType == 'WP'}"
                          class="rent-unit-child dy-fx-1 relative"
                          @click.stop.prevent="getUnitDetails(item.floorId,item.floorNum,item2.unitId,item2.unitName,item2.unitAcreage,item2.unitType,item2.rentState,item2.contractId,item.floorName,item)">
                          <div class="intro">
                            {{item2.unitName}}-{{item2.unitAcreage}}m²-{{item2.bType | formatBusinessType}}
                          </div>
                          <div class="overflow">
                            <b class="name ellipsis-1" style="width: 60%;">{{item2.company}}</b>
                          </div>
                          <span class="absolute rent-child-state" style="color: #44B548;"
                            v-if="item2.rentState == 'IR'">在租</span>
                          <span class="absolute rent-child-state" style="color: rgba(191,192,193,1);"
                            v-if="item2.rentState == 'VA'">空置</span>
                          <span class="absolute rent-child-state" style="color: #E4607D;"
                            v-if="item2.rentState == 'IP'">即将履约</span>
                          <span class="absolute rent-child-state" style="color: #F9B96B;"
                            v-if="item2.rentState == 'DU'">即将到期</span>
                          <span class="absolute rent-child-state" style="color: #C68B8B;"
                            v-if="item2.rentState == 'ZY'">自用</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 车位视图内容 -->
    <section v-if="stView">
      <div class="content ptb-10 js-content">
        <div class="clearfix" :data-floorId="single.floorId" v-for="(single,index) in stData[unitsKey]" style="border: 1px solid rgb(239, 240, 244);
        margin-bottom: 15px;">
          <div class="sectionTitle">
            <span>{{single.buildingName || '--'}}</span>
            <img @click="single.flag = !single.flag" :style="!single.flag?'transform:rotate(-180deg)':''"
              src="assets/images/unitShowIcon.png" alt="">
          </div>

          <div v-if="single.flag">
            <div v-for="item in single.children">
              <div class="title dy-flex" style="padding-left: 15px; color: #666;">
                <div class="pl-0 mr-10">{{item.floorName || '--'}}（楼层）</div>
                <div class="title-squre mr-10">{{item.positions[0].unitName}}（单元）</div>
                <div class="title-squre mr-10">{{item.num}}（资源个数）</div>
              </div>
              <div class="col-xs-8 clearfix position-content-item">
                <!-- 车位 -->
                <!-- 已出租 cz 即将履约 lv 即将到期 dq 自用 zy 空置 kz-->
                <div class="rt-position-item" v-for="item1 in item.positions" :unitId="item1.unitId"
                  :positonId="item1.positonId"
                  @click="stGoToContract(item.floorId,item.floorNum,item1.unitId,item1.unitName,item1.positionId,item1.positionName,item1.rentState,item1.contractId,item.floorName)">
                  <div class="icon-Gm-parking-display parking-position-icon"
                    :class="{fn:item1.rentState === 'FN',cz:item1.rentState === 'IR',lv:item1.rentState === 'IP',dq:item1.rentState === 'DU',zy:item1.rentState === 'ZY',kz:item1.rentState === 'VA'}"
                    :rentState="item1.rentState"></div>
                  <span class="posotion-no">{{item1.positionName}}</span>
                  <b class="position-name">{{item1.company}}</b>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- 工位视图内容 -->
    <section v-if="wpView">

      <div class="content ptb-10 js-content">
        <div class="clearfix" v-for="(single,index) in wpData[unitsKey]" style="border: 1px solid rgb(239, 240, 244);
        margin-bottom: 15px;">
          <div class="sectionTitle">
            <span>{{single.buildingName || '--'}}</span>
            <img @click="single.flag = !single.flag" :style="!single.flag?'transform:rotate(-180deg)':''"
              src="assets/images/unitShowIcon.png" alt="">
          </div>
          <div v-if="single.flag">
            <div v-for="item in single.children">
              <div class="title dy-flex" style="padding-left: 15px; color: #666;">
                <div class="pl-0 mr-10">{{item.floorName || '--'}}（楼层）</div>
                <div class="title-squre mr-10">{{item.positions[0].unitName}}（单元）</div>
                <div class="title-squre mr-10">{{item.num}}（资源个数）</div>
              </div>

              <div class="col-xs-8 clearfix position-content-item">
                <!-- 工位 -->
                <!-- 已出租 cz 即将履约 lv 即将到期 dq 自用 zy 空置 kz-->
                <div class="rt-position-item" v-for="item1 in item.positions" :data-unitId="item1.unitId"
                  :data-positionId="item1.positionId"
                  @click="wpGoToContract(item.floorId,item.floorNum,item1.unitId,item1.unitName,item1.positionId,item1.positionName,item1.rentState,item1.contractId, item.floorName)">
                  <div class="icon-Gm-station-display parking-position-icon"
                    :class="{fn:item1.rentState === 'FN',cz:item1.rentState === 'IR', yd:item1.rentState === 'YD', lv:item1.rentState === 'IP',dq:item1.rentState === 'DU',zy:item1.rentState === 'ZY',kz:item1.rentState === 'VA'}"
                    :rentState="item1.rentState"></div>
                  <span class="posotion-no">{{item1.positionName}}</span>
                  <b class="position-name">{{item1.company}}</b>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    </section>

    <!-- 平面图视图内容 -->
    <section v-if="pmtView">
      <div class="floor-plan-pic">
        <div class="rent-floor-title clearfix">
          <span class="pull-left rent-select-floor">请选择楼层：</span>
          <div class="select-ul rent-floor pull-left">
            <span class="select-name br-4 box-i-shadow">--</span>
            <ul>
              <li v-for="(item, index) in floorData" @click="getpmt(item.floorId, item.plainGraph)">{{item.floorName}}
              </li>
            </ul>
          </div>
        </div>
        <div class="floor-plan-indicator clearfix" v-if="imageUrl">
          <button type="button" class="indicator-btn" @click="showFullScreen">
            <span class="icon-GM-full-screen icon"></span>全屏
          </button>
          <button type="button" class="indicator-btn mr-10" @click="increaseFloorPlan">
            <span class="icon-GM-amplification icon"></span>放大
          </button>
          <button type="button" class="indicator-btn mr-10" @click="decreaseFloorPlan">
            <span class="icon-GM-shrink icon"></span>缩小
          </button>
        </div>
        <!-- 平面图 -->
        <div class="floor-drap">
          <div class="floorplan-pos" v-if="!imageUrl">暂无平面图</div>
          <div id="container" v-if="imageUrl">
            <div id="outer-dropzone">
              <img class="floor-image" :src="imageUrl" alt="" />
            </div>

            <div v-for="(item, index) in pmtData" :data-width="item.width" :data-height="item.height"
              :data-x="item.paddingLeft" :data-y="item.paddingTop"
              :class="{'drag-drop1':true, 'cz-drap': item.rentState == 'IR', 'ly-drap': item.rentState == 'IP', 'dq-drap': item.rentState == 'DU', 'zy-drap': item.rentState == 'ZY', 'kz-drap': item.rentState == 'VA'}"
              :style="{transform: 'translate('+item.paddingLeft+'px, '+item.paddingTop+'px)', height: item.height + 'px', width: item.width +'px'}"
              @click="getUnitDetails(item.floorId,item.floor,item.unitId,item.unitName,item.acreage,item.unitType,item.rentState,item.floorName)"
              v-if="item.locateType == 'Y'">
              <div class="posTit">
                <span :class="{'ellipsis-1': true, absoluteIf: item.company }">{{item.unitName}} - {{item.acreage}}m² -
                  {{item.businessType | formatBusinessType}}</span>
                <p class="ellipsis-1 absoluteIf" v-if="item.company">{{item.company}}</p>
              </div>
              <div class="pos-rent-info">
                <span>{{item.unitName}} - {{item.acreage}}m² - {{item.businessType | formatBusinessType}}</span>
                <p>{{item.company}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 单元详情 -->
  <div class="pop" :style="unitDetailStyle" v-if="isShowPositionDetail">
    <div class="head-pop font-16"><span class="title">单元详情</span>
      <button class="fw-close absolute" @click="closePositionDetail">×</button>
    </div>
    <div class="rt-content-pop plr-24 ptb-10 bg-fafbfc">
      <!-- 数据为空 -->
      <div v-if="positionData.length == 0">
        <img src="assets/images/unit-config.png" alt="暂无车位工位图">
        <p class="alert-word" v-if="noWp">暂无工位，请到工位配置编辑工位</p>
        <p class="alert-word" v-if="noSt">暂无车位，请到车位配置编辑车位</p>
      </div>
      <ul class="clearfix" v-if="positionData.length != 0" :style="flexStyle">
        <li class="detail-pop-position-item cursor" :positionType="item.positionType"
          v-for="(item,index) in positionData">
          <span
            :class="{cz:item.rentState === 'IR',lv:item.rentState === 'IP',dq:item.rentState === 'DU',zy:item.rentState === 'ZY',kz:item.rentState === 'VA','icon-Gm-parking-display':item.positionType === 'ST','icon-Gm-station-display':item.positionType === 'WP'}"
            @click="unitPositionGoToContract(item.positionId,item.positionName,item.positionType,item.rentState,item.contractId)"></span>
          <p style="height:17px;overflow:hidden">{{item.positionName}}</p>
          <i style="height:17px;overflow:hidden">{{item.companyName}}</i>
        </li>
      </ul>
    </div>
  </div>

  <!-- 单元详情 -->
  <div class="pop" v-if="isShowBuUnitDetail">
    <div class="head-pop font-16"><span class="title">单元详情</span>
      <button class="fw-close absolute" @click="closeBuUnitDetail">×</button>
    </div>
    <div class="rt-unit-content-pop-container">
      <ul class="plr-24 border-b clearfix cursor">
        <li v-for="(item, index) in buUnitPopTab" @click="getBuUnitMes(item)"
          :class="{active:selectedbuUnitTabItem == item}">{{item}}</li>
      </ul>
      <div class="content plr-24">
        <!-- //工位车位弹窗 -->
        <section v-if="selectedbuUnitTabItem == '租赁情况'">
          <div class="wpst-wrap">
            <img src="assets/images/unit-config.png" v-if="!positionData.length">
            <div v-for="item in positionData" class="station-li ellipsis-1 text-center color-999 mt-15 font-14"
              :data-type="item.rentState" v-if="positionData.length">
              <p :class="{
                'icon-Gm-parking-display': item.positionType == 'ST',
                'icon-Gm-station-display': item.positionType == 'WP',
                'cz':item.rentState === 'IR',
                'lv':item.rentState === 'IP',
                'dq':item.rentState === 'DU',
                'zy':item.rentState === 'ZY',
                'kz':item.rentState === 'VA',
                'cursor': true,
                'icon-Nav-contract-choice': selectedPositionIds.indexOf(item.positionId) > -1
              }" @click="selectedPosition(item)" style="font-size:20px;"></p>
              <p>{{ item.positionName }}</p>
            </div>
          </div>
        </section>
        <!-- //相关文件 -->
        <section v-if="fileFlag">
          <ul>
            <li class="clearfix border-b lin-hei-34" style="float:none;width:100%;margin:0; text-align:left; "
              v-for="item in contractFile">
              <p class="icon-Nav-contract-file file-name pull-left" @click="previewImage(item.url)"
                style="line-height:50px;width:80%;"><span class="ml-10">{{item.name}}</span></p>
              <p class="pull-right file-btn"><a :href="item.url"
                  class="icon-Gm-download download-file-btn ml-10 color-primary" style="line-height: 48px;"><b
                    class="pl-5 font-12">下载</b></a> </p>
            </li>
          </ul>
        </section>
        <!-- 房源信息 -->
        <section v-if="houseInfoFlag">
          <div class="pb-10 border-b">
            <div class="title">基础信息</div>
            <div class="line-height-34"><b>项目：</b><span>{{unitDetails.projectName | undefined}}</span></div>
            <div class="dy-flex line-height-34">
              <div class="dy-fx-1">
                <b>楼栋：</b>
                <span>{{unitDetails.buildingName | undefined}}</span>
              </div>
              <div class="dy-fx-1">
                <b>楼层：</b>
                <span>{{unitDetails.floorName}}</span>
              </div>
              <div class="dy-fx-1">
                <b>单元名称：</b>
                <span>{{unitDetails.unitName | undefined}}</span>
              </div>
            </div>
            <div class="dy-flex line-height-34">
              <div class="dy-fx-1">
                <b>单元类型：</b>
                <span>{{unitDetails.unitType | formatBusinessType}}</span>
              </div>
              <div class="dy-fx-1">
                <b>单元底价：</b>
                <span>{{unitDetails.basePrice | formatNum}}{{unitDetails.basePriceType ? (unitDetails.basePriceType == 'M' ? '元/m²/月' : '元/m²/天') : '元/m²/天'}}</span>
              </div>
              <div class="dy-fx-1">
                <b>显示价格：</b>
                <span>{{unitDetails.sellPrice | formatNum}}{{unitDetails.sellPriceUnits || '元/m²/天'}}</span>
              </div>
            </div>
            <div class="dy-flex line-height-34">
              <div class="dy-fx-1">
                <b>单元面积：</b>
                <span>{{unitDetails.unitAcreage | formatNum}}m²</span>
              </div>
              <div class="dy-fx-1">
                <b>建筑面积：</b>
                <span>{{unitDetails.consAcreage | formatNum}}m²</span>
              </div>
              <div class="dy-fx-1">
                <b>套内面积：</b>
                <span>{{unitDetails.innerAcreage | formatNum}}m²</span>
              </div>
            </div>
            <div class="dy-flex line-height-34">
              <div class="dy-fx-1">
                <b>装修水平：</b>
                <span>{{typeval | undefined}}</span>
              </div>
              <div class="dy-fx-1">
                <b>朝向：</b>
                <span>{{unitDetails.orientationType | unitOrientation | undefined}}</span>
              </div>
              <div class="dy-fx-1">
                <b>临街：</b>
                <span v-if="unitDetails.streetType === 'Y'">是</span>
                <span v-if="unitDetails.streetType === 'N'">否</span>
                <span v-if="unitDetails.streetType === 'undefined'">--</span>
              </div>
            </div>
          </div>
          <div class="pb-10 border-b facility-container">
            <div class="title">配套设施</div>
            <ul class="clearfix">
              <li v-for="(item,index) in baseFacility" v-if="item.selected" :code="item.code"
                :class="{active:item.selected}">{{item.name}}</li>
            </ul>
          </div>
        </section>
        <section v-if="rentFlag" style="padding-top: 20px;">
          <div class="line-height-34">
            <b>客户名称：</b>
            <span>{{rentInfo.name || '--'}}</span>
          </div>
          <div class="line-height-34 dy-flex">
            <div class="dy-fx-1">
              <b>联系人：</b>
              <span>{{rentInfo.lperson || '--'}}</span>
            </div>
            <div class="dy-fx-1">
              <b>联系电话：</b>
              <span>{{rentInfo.phone || '--'}}</span>
            </div>
          </div>
          <div class="line-height-34">
            <b>通讯地址：</b>
            <span>{{rentInfo.address || '--'}}</span>
          </div>
          <div class="line-height-34 dy-flex">
            <div class="dy-fx-1">
              <b>渠道分类：</b>
              <span>{{rentInfo.channelCategoryVal || '--'}}</span>
            </div>
            <div class="dy-fx-1">
              <b>渠道名称：</b>
              <span>{{rentInfo.channelNameVal || '--'}}</span>
            </div>
          </div>
          <div class="line-height-34">
            <b>对接人：</b>
            <span>{{rentInfo.rpersonName || '--'}}</span>
          </div>
          <div class="line-height-34">
            <b>当前单价：</b>
            <span>{{rentInfo.presentPrice ? (rentInfo.presentPrice + '元/平米/' + (rentInfo.rentPriceUnit == 'M'?'月':'天')) : '--'}}</span>
          </div>
        </section>
        <!-- 图文描述 -->
        <section v-if="imageFontFlag">
          <div class="image-font">
            <div class="title">图片信息</div>
            <div>
              <div class="dy-flex" v-if="unitPositionImgArr.length">
                <div class="dy-fx-1 dy-flex image-title">楼层平面落位：</div>
                <div class="dy-fx-5">
                  <img :src="item + '?w=180&h=180'" alt="楼层平面落位图" v-for="item in unitPositionImgArr"
                    @click="showBigImage(item)">
                </div>
              </div>
              <div class="dy-flex" v-if="unitPlainImgArr.length">
                <div class="dy-fx-1 dy-flex image-title">单元平面图：</div>
                <div class="dy-fx-5">
                  <img :src="item + '?w=180&h=180'" alt="单元平面图" v-for="item in unitPlainImgArr"
                    @click="showBigImage(item)">
                </div>
              </div>
              <div class="dy-flex" v-if="consImgsArr.length">
                <div class="dy-fx-1 dy-flex image-title">装修图：</div>
                <div class="dy-fx-5">
                  <img :src="item + '?w=180&h=180'" alt="装修图" v-for="item in consImgsArr" @click="showBigImage(item)">
                </div>
              </div>
              <div class="dy-flex" v-if="innerImgsArr.length">
                <div class="dy-fx-1 dy-flex image-title">室内实拍图：</div>
                <div class="dy-fx-5">
                  <img :src="item + '?w=180&h=180'" alt="室内实拍图" v-for="item in innerImgsArr"
                    @click="showBigImage(item)">
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">单元简介</div>
            <div class="unit-intro">
              <div class="ptb-10 plr-12" style="white-space: pre-wrap;word-break:break-all;">{{unitDetails.memo}}</div>
            </div>
          </div>
        </section>
        <!-- 初步意向 -->
        <section v-if="intention">
          <div>
            <div class="box-i-shadow-2 br-4 associated-contract mt-10">
              <div class="dy-flex border-b table-th">
                <div class="dy-fx-1">序</div>
                <div class="dy-fx-2">客户名称</div>
                <div class="dy-fx-2">需求时间</div>
                <div class="dy-fx-2">需求面积(m²)</div>
                <div class="dy-fx-2">预算金额(元)</div>
              </div>
              <ul class="dy-flex border-b table-tb" v-for="(item,index) in intentionList">
                <li class="dy-fx-1">{{index+1}}</li>
                <li class="dy-fx-2" @click="gotoDetail(item.customerId)" style="cursor: pointer;color:#337ab7">{{item.customerName || '--'}}</li>
                <li class="dy-fx-2">{{item.intentStartDate| formatDate}}至{{item.intentEndDate| formatDate}}</li>
                <li class="dy-fx-2">{{item.acreage || '--'}}</li>
                <li class="dy-fx-2">{{item.budgetAmount || '--'}}</li>
              </ul>
            </div>
          </div>
        </section>
        <!-- 相关合同 -->
        <section v-if="contractFlag">
          <div class="box-i-shadow-2 br-4 associated-contract mt-10">
            <div class="dy-flex border-b table-th">
              <div class="dy-fx-1">序</div>
              <div class="dy-fx-2">合同编号</div>
              <div class="dy-fx-2">签订时间</div>
              <div class="dy-fx-2">记租时间</div>
              <div class="dy-fx-2">到期时间</div>
              <div class="dy-fx-2">状态</div>
              <div class="dy-fx-2">签订人</div>
            </div>
            <ul class="dy-flex border-b table-tb" v-for="(item,index) in associatedContracts">
              <li class="dy-fx-1">{{index + 1}}</li>
              <li class="dy-fx-2">
                <a :href="'#/contractNewDeatil?id=' + item.id + '&ddtab=true'" target="_blank"
                  v-if="checkContractFlag">{{item.cCode ? item.cCode : item.mCode}}</a>
                <a href="javascript:;" target="_blank"
                  v-if="!checkContractFlag">{{item.cCode ? item.cCode : item.mCode}}</a>
              </li>
              <li class="dy-fx-2">{{item.signTime | formatDate}}</li>
              <li class="dy-fx-2">{{item.beginDate | formatDate}}</li>
              <li class="dy-fx-2">{{item.endDate | formatDate}}</li>
              <li class="dy-fx-2">{{item.auditState | contractAuditState}}</li>
              <li class="dy-fx-2 ellipsis-1">{{item.sperson}}</li>
            </ul>
          </div>
        </section>
        <!-- //意向信息 -->
        <section v-if="yxFlag" v-show="permissions.indexOf('c201')">
          <div class="br-4 box-i-shadow-2 mt-15 text-center yxDetailInfo" v-if="intentlist.length">
            <div style="width:1135px;">
              <div class="clearfix l-h-40">
                <div style="width: 50px;" class="pull-left">序</div>
                <div style="width: 165px;" class="pull-left">意向书编号</div>
                <div style="width: 100px;" class="pull-left">意向项目</div>
                <div style="width: 265px;" class="pull-left">意向周期</div>
                <div style="width: 165px;" class="pull-left">确认时间</div>
                <div style="width: 125px;" class="pull-left">意向金（元）</div>
                <div style="width: 165px;" class="pull-left">收款截止日</div>
                <div style="width: 100px;" class="pull-left">状态</div>
              </div>
              <div class="clearfix l-h-40 border-t cm-hover-bg" v-for="(item,index) in intentlist">
                <div style="width: 50px;height:40px;" class="pull-left">{{index+1}}</div>
                <div style="width: 165px;height:40px;" class="pull-left"><a target="_blank"
                    :href="'#/yxDetail?id='+item.intentId+'&ddtab=true'">{{item.intentCode}}</a></div>
                <div style="width: 100px;height:40px;" class="pull-left">{{item.projectName || '--'}}</div>
                <div style="width: 265px;height:40px;" class="pull-left">{{item.intentStartDate | formatDate}} 至
                  {{item.intentEndDate | formatDate}}</div>
                <div style="width: 165px;height:40px;" class="pull-left">{{item.confirmTime | formatDate}}</div>
                <div style="width: 125px;height:40px;" class="pull-left">{{item.intentAmount || '--'}}</div>
                <div style="width: 165px;height:40px;" class="pull-left">{{item.intentPaymentDeadline | formatDate}}
                </div>
                <div style="width: 100px;height:40px;" class="pull-left">{{item.auditStateVal || '--'}}</div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="ptb-10 text-center" v-if="isDisplayRentPop">
      <button type="button" class="btn n-btn-primary mr-10" @click="buUnitGoToContract(0)" v-if="createContractFlag"
        v-show="permissions.indexOf('c202') > -1">新增意向</button>
      <button type="button" class="btn n-btn-primary mr-10" @click="buUnitGoToContract(1)" v-if="createContractFlag"
        v-show="permissions.indexOf('c32') > -1">新增合同</button>
      <button type="button" class="btn n-btn-outline" @click="closeBuUnitDetail">关闭</button>
    </div>
  </div>

  <!--遮罩-->
  <div class="backdrop" v-if="isShowPositionDetail"></div>
  <div class="backdrop" v-if="isShowBuUnitDetail"></div>
</section>

<script src="modules/rent/scripts/rent.js" charset="utf-8"></script>
